<template>
  <div>
    <div v-if="!token" class="conmon_search_login">
      <img src="@/assets/image/user_icon.png">
      <router-link to="/login">登录</router-link>
<!--      <router-link to="/register">/ 注册</router-link>-->
    </div>

    <el-dropdown v-else style="color: #fff" @command="handleCommand">
      <div>
        <el-badge is-dot class="item">
          <router-link to='/message'><i class="el-icon-message-solid" style="font-size: 20px;color:#fff"/></router-link>
        </el-badge>
        欢迎：{{userInfo.nickname}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
      <el-dropdown-menu slot="dropdown" style="background-color: #25262E;border-color: #25262E">
        <el-dropdown-item class="user-dorp-item" command="myCollecting">我的收藏</el-dropdown-item>
        <el-dropdown-item class="user-dorp-item" command="signOut">安全退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>


<script>
  import {mapGetters,mapMutations} from 'vuex'

  export default {

    name: 'indexhead',
    data() {
      return {
        token: localStorage.getItem('TOKEN_KEY')
      }
    },
    computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
      ...mapGetters({userInfo: 'getUserInfo'})
    },
    
    mounted() {
    },
    methods: {
      login(){
        this.$router.push('/login')
      },
      register(){
        this.$router.push('/register')
      },
      handleCommand(command) {
        this[command]()
      },
      signOut(){
        localStorage.clear()
        window.location.reload();
      },
      myCollecting(){
        this.$router.push('/collecting')
      }
    }
  }
</script>

<style>
  /*.item {*/
  /*  margin-top: 10px;*/
  /*  margin-right: 40px;*/
  /*}*/
  .user-dorp-item {
    color: #fff;
  }

  .user-dorp-item:hover {
    background-color: #25262E !important;
    color: #FF8203 !important;
  }
  .el-dropdown-menu__item--divided:before{
    background-color: #25262E;
    color: #828282;
  }
  a{
    color: #fff;
  }
</style>
